<!DOCTYPE html>
<html>
    <head>
    	<title>jModel</title>
    	<meta charset="UTF-8"/>
    	<link type="text/css" rel="stylesheet" href="stylesheets/main.css"/>
    	<script type="text/javascript" src="http://use.typekit.com/gez1dtf.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
        <!--[if lte IE 8]>
        <script src="html5.js" type="text/javascript"></script>
        <![endif]-->
    </head>

    <body class="cross">

        <header>
            <nav>
                <ul>
                    <li class="cross"><a href="">Introduction</a></li>
                    <li class="opal"><a href="">Opal<span class="extension">.js</span></a></li>
                    <li class="sapphire"><a href="">Sapphire<span class="extension">.js</span></a></li>
                    <li class="emerald"><a href="">Emerald<span class="extension">.js</span></a></li>
                    <li class="topaz"><a href="">Topaz<span class="extension">.js</span></a></li>
                    <li class="diamond"><a href="">Diamond<span class="extension">.js</span></a></li>
                    <li class="downloads"><a href="">Downloads</a></li>
                    <li class="development"><a href="">Development</a></li>
                </ul>
                <!--div class="search"-->
                    <input type="string" value="Search"></input>
                <!--/div-->
            </nav>
        </header>
    
        <div id="main">
        
            <nav class="side">
                <ul>
                    <li class="first before">jModel<span class="extension">.org</span></li>
                    <ul>
                        <li class="selected"><a href="">Introduction</a></li>
                        <li class="after"><a href="">Getting Started</a></li>
                        <li><a href="">Downloads</a></li>
                        <li><a href="">Development</a></li>
                    </ul>
                    <li class="section opal">Opal</li>
                    <li class="section sapphire">Sapphire</li>
                    <li class="section emerald">Emerald</li>
                    <li class="section topaz">Topaz</li>
                    <li class="section diamond">Diamond</li>
                    <li>&#160;</li>
                </ul>
            </nav>
        
            <article>
                
                <div class="content">
                
                    <section id="jmodel">
                        <hgroup>
                            <h1>jModel</h1>
                        </hgroup>
                        <section class="introduction">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </section>
                    </section>
                
                    <section id="libraries" style="margin-bottom: -16px;">

                        <section id="opal">
                            <hgroup>
                                <h1>Opal<span class="extension">.js</span></h1>
                                <h2><strong>O</strong>bject, <strong>P</strong>redicate and <strong>A</strong>ction <strong>L</strong>ibrary</h2>
                            </hgroup>
                            <p><strong>Opal</strong> provides primitives for <strong>function composition</strong> and <strong>object manipulation</strong>; and sub-libraries for <strong>predicates</strong>,  <strong>orderings</strong> and <strong>reduction</strong> functions.</p>
                        </section>

                        <section id="sapphire">
                            <hgroup>
                                <h1>Sapphire<span class="extension">.js</span></h1>
                                <h2>A library for <strong>sets</strong> and <strong>lists</strong></h2>
                            </hgroup>
                            <p><strong>Sapphire</strong> builds on Opal to provide an implementation of <strong>sets</strong> and <strong>lists</strong>, including <strong>typed collections</strong> with <strong>implicit constructors</strong> and <strong>indexed collections</strong>.</p>
                        </section>
                        
                        <label class="sets">&#160;<span>sets</span></label>

                    </section>
                
                    <section id="libraries">
                    
                        <section id="emerald">
                            <hgroup>
                                <h1>Emerald<span class="extension">.js</span></h1>
                                <h2>A library for <strong>event composition</strong></h2>
                            </hgroup>
                            <p><strong>Emerald</strong> implements a model of <strong>composite events</strong> that effectively allows <strong>queries over events</strong>. It also provides primitives for combining and splitting <strong>event streams</strong>.</p>
                        </section>

                        <section id="topaz">
                            <hgroup>
                                <h1>Topaz<span class="extension">.js</span></h1>
                                <h2>A library for <strong>observable</strong> objects</h2>
                            </hgroup>
                            <p><strong>Topaz</strong> combines Sapphire sets and Emerald events to provide <strong>observable sets</strong> and <strong>observable objects</strong> that issue notifications when changed.</p>
                        </section>
                        
                        <label class="events">&#160;<span>events</span></label>

                    </section>
                    
                    <section id="libraries">
                    
                        <section id="diamond">
                            <hgroup>
                                <h1>Diamond<span class="extension">.js</span></h1>
                                <h2>A <strong>domain model</strong> library</h2>
                            </hgroup>
                            <section class="introduction">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </section>
                        </section>
                    
                    </section>
                
                </div>
            
            </article>
        
        </div>
    
        <footer>
            <ul>
                <li>© 2009–2013 <a href="http://theculture.org/rich/">Richard Baker</a></li>
                <li>Dual licensed under the MIT and GPL licenses</li>
                <li><a href="http://validator.w3.org/check/referer">valid HTML5</a></li>
            </ul>
        </footer>

    </body>
</html>